<template>

    用户名称: <el-input v-model="page.userName" style="width: 200px;"/>   
    <el-button type="primary" @click="getUserList1">查询</el-button>

    <el-table :data="userList" border style="width: 100%;text-align: center;margin-top: 10px;">
        <el-table-column type="index" :index="indexMethod" label="编号" />
        <el-table-column prop="userName" label="用户名" />
        <el-table-column label="角色">
            <template v-slot="scope">
                <el-text v-for="item in scope.row.roleName">{{ item.roleName }},</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="userSex" label="性别">
            <template v-slot="scope">
                <el-tag v-if="scope.row.userSex == 1" type="primary">男</el-tag>
                <el-tag v-else type="danger">女</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="provinceName" label="所在省份" />
        <el-table-column prop="cityName" label="所在市" />
        <el-table-column prop="countyName" label="所在县" />
        <el-table-column prop="userAddress" label="地址详情(超过5个字符自动截断，显示…，鼠标悬停显示全部内容)" width="100" show-overflow-tooltip />
        <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="createTime" label="创建日期">
            <template v-slot="scope">
                <el-text v-if="scope.row.createTime == null ? '' : scope.row.createTime">{{ scope.row.createTime.replace("T", " ").substring(0,19) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" />
        <el-table-column prop="updateTime" label="修改日期">
            <template v-slot="scope">
                <el-text v-if="scope.row.updateTime == null ? '' : scope.row.updateTime">{{ scope.row.updateTime.replace("T", " ").substring(0,19) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="160">
            <template v-slot="scope">
                <el-button type="primary"
                    @click="router.push({ name: 'UserUpdata', query: { id: scope.row.id } })">修改</el-button>
                <el-button type="danger" @click="delUser(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[3, 5, 8]" :background="true" layout="total, slot, prev, pager, next" prev-text="上一页"
                    next-text="下一页" :total="page.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <span>,每页{{ page.pageSize }}条,当前第{{ page.pageIndex }}/{{ page.totalPage }}页</span>
                    <el-button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1"
                        class="btn-prev">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[3, 5, 8]" :background="true" layout="slot, sizes, jumper" prev-text="上一页"
                    next-text="下一页" :total="page.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button @click="handleCurrentChange(page.totalPage)" :disabled="page.pageIndex == page.totalPage"
                        class="btn-prev">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
})
//编号
const indexMethod = (index: number) => {
    return index + 1;
}

//分页
const page = reactive({
    userName: '',
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    totalPage: 0
})


//分页
const handleSizeChange = (val: number) => {
    page.pageSize = val;
    getUserList1();
}
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    getUserList1();
}

//获取用户
const userList = ref([])
const getUserList1 = () => {
    axios.get("/api/UserInfo/GetUserAllAsync1", {
        params: {
            UserName: page.userName,
            PageIndex: page.pageIndex,
            PageSize: page.pageSize
        }
    })
        .then(res => {
            userList.value = res.data.data.list
            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage
            //   console.log(res.data.data[0].roleName)
        })
        .catch(err => {
            console.log(err);
        })
}

//删除用户
const delUser = (row: any) => {

    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/api/UserInfo/Delete", row)
                .then(res => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getUserList1();
                    }
                    else {
                        ElMessage.error("删除失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })

}

onMounted(() => {
    getUserList1();
})
</script>